import React, { Component } from "react";
import { ListView } from "antd-mobile";
import { restApiRequest } from "../Public/Api/Public";
import LazyLoad from "react-lazyload";
import pic_empty_order from "../../images/pic_empty_order.png";
import icon_Historical from "../../images/icon_Historical_order.png";
import PropTypes from "prop-types";

//页码
let pageNum = 0;
//每页显示数据的条数
const pageSize = 999;
let orderListUrl = '/shop/api/getlist';
export default class Order extends Component {
    static contextTypes = {
        router: PropTypes.object
    }

    constructor(props, context) {
        super(props, context);
        this.state = {
            dataSource: new ListView.DataSource({
                rowHasChanged: (row1, row2) => row1 !== row2,
            }),
            visible: false,
        };
        this.order_total_amount = 0;

    }

    componentWillMount() {
        //判断是否登录
        let sessionKey = localStorage.getItem('sessionkey');
        if (sessionKey === null) {
            this.setState({ visible: true })
        } else {
            let tabIndex = this.props.tabIndex;
            let param = { sessionkey: sessionKey, page_num: 0, page_size: pageSize, state: [tabIndex] };
            let jsonData = restApiRequest.getSign(param);
            this.fetchData(orderListUrl, jsonData);
        }

    }

    //获取商品列表
    fetchData(url, jsonData) {
        restApiRequest.fetchp(url, jsonData).then((response) => {
            if (!response.ok) {
                var error = new Error(response.statusText);
                error.response = response;
                throw error;
            } else {
                return response.json();
            }
        }).then((response_json) => {
            // console.log(response_json.data,'----->order');
            let res_code = response_json.code;
            if (res_code === '0000') {
                this.order_total_amount = response_json.data.total_count
                let responseData = response_json.data;
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(responseData.order_list),
                    loaded: true,
                });
            } else {
                this.setState(
                    {
                        loaded: true,
                        foot: 1,
                    }
                );
            }
        }).catch((ex) => {
            console.log(ex);
        });
    }

    //点击跳转详情
    jumpRow(rowData) {
        this.context.router.history.push({
            pathname: '/OrderDetail',
            state: rowData,
        })
    }

    render() {

        const row = (rowData, sectionID, rowID) => {

            let time = new Date(parseInt(rowData.add_time) * 1000);
            let m = time.getMonth() + 1;
            let d = time.getDate();

            return (

                <div
                    key={rowID}
                    onClick={() => this.jumpRow(rowData)}
                    className="home-list"
                >
                    <section className="home-list-imgbox">

                        <LazyLoad
                            offset={100}
                            debounce={500}
                            placeholder={
                                <section className="home-list-lazyload">
                                    <svg className="home-list-placeholder">
                                        <use xlinkHref={'#icon-ico_page_bottom_dog'}></use>
                                    </svg>
                                </section>
                            }
                        >
                            <img className="home-list-img" src={rowData.top_image_url} />
                        </LazyLoad>

                        <section className="home-order-money">
                            <span>￥</span>
                            <span>{rowData.total_money}</span>
                        </section>

                        <section className="home-arrows-box">
                            <div className="home-arrows-left" />
                            <div className="home-arrows-right" />
                        </section>
                    </section>

                    <section className="home-text-box">
                        <p>{rowData.major_product_shortname}</p>
                        <p>
                            <span>{rowData.spec_product_name} x{rowData.amount}张</span>
                            <span>{m}月{d}日</span>
                        </p>
                    </section>

                </div>

            )

        };

        const renderFooter = () => {

            return (
                <section className="hom-list-footer" style={{
                    paddingBottom: '.12rem'
                }}>
                    <p className="hom-list-footer-text">我是有底线的</p>
                    <svg className="hom-list-footer-icon">
                        <use xlinkHref={'#icon-ico_page_bottom_dog'}></use>
                    </svg>
                </section>
            )
        };

        const renderHeader = () => {

            return (
                <section className="order-list-top-placeholder" />
            )
        };

        return (
            <div>
                {
                    this.order_total_amount == 0 ?

                        <div className="order-null-img">
                            <img src={pic_empty_order} />
                        </div> :
                        <ListView
                            dataSource={this.state.dataSource}
                            renderRow={row}
                            renderHeader={renderHeader}
                            renderFooter={renderFooter}
                            style={{
                                height: window.innerHeight - 95,
                            }}
                        />
                }

                <section
                    className="order-history-icon"
                    onClick={() => {
                        let host = window.location.href;
                        let product_url = "";
                        if (host.indexOf('zzwx1') != -1) {
                            product_url = "http://zzwx1.hidizhu.com/api/order/index";
                        } else {
                            product_url = "http://weixin.hidizhu.com/api/order/index";
                        }
                        window.location.href = product_url;
                    }}>
                    <img src={icon_Historical} />
                </section>
            </div>
        )
    }
}
